<script setup>
import Position from '@/components/Position.vue'
import FooterBorder from '@/components/FooterBorder.vue'
</script>

<template>
    <div class="content">
        <div class="top-image"></div>
        <Position>
            <template #default>
                门票预购
            </template>
        </Position>
        <div style="width: 100%;background-color: white;">
            <div class="info">
                <div class="left">
                    <h3>开宫时间</h3>
                    <img class="line-img" src="@/assets/line.png">
                    <div
                        style="display: flex;justify-content:space-between;color:#707070;font-family:'思源黑体';font-size:13px;text-align: center;margin-top:20px;align-items: center;">
                        <div>
                            <div>开放入宫时间</div>
                            <div style="font-size:50px;font-weight: bold;color:#A92425;">9:40</div>
                        </div>
                        <img src="@/assets/t-line.png" style="width: 50px;height: 10px;margin-top: 18px;">
                        <div>
                            <div>停止入宫时间</div>
                            <div style="font-size:50px;font-weight: bold;color:#A92425;">15:20</div>
                        </div>
                        <img src="@/assets/t-line.png" style="width: 50px;height: 10px;margin-top: 18px;">
                        <div>
                            <div>闭宫时间</div>
                            <div style="font-size:50px;font-weight: bold;color:#A92425;">17:00</div>
                        </div>
                    </div>
                    <div style="color:#333;font-size:16px;font-family:'思源黑体';">
                        布达拉宫不售当日票，所有游客须实名制预约参观，需进行人脸认证，参观需提前进行门票预约，符合布达拉宫门票购买优惠政策的游客，可以凭有效证件购买半价票。 </div>
                </div>
                <div class="right">
                    <h3>购票须知</h3>
                    <img class="line-img" src="@/assets/line.png">
                    <ul style="max-height: 1650px; overflow: hidden;width: 100%;margin-top: 8px;padding-left:18px">
                        <li style="list-style: disc;color: #000;">
                            <h3><a style="height:33px;line-height:33px;color:#333;padding: 0;background: none;font-size:14px;font-family:'思源黑体';"
                                    href="/help">布达拉宫门票团体预订用户服务协议</a></h3>
                        </li>
                        <li style="list-style: disc;color: #000;">
                            <h3><a style="height:33px;line-height:33px;color:#333;padding: 0;background: none;font-size:14px;font-family:'思源黑体';"
                                    href="/help">布达拉宫门票散客购票用户服务协议</a></h3>
                        </li>
                        <li style="list-style: disc;color: #000;">
                            <h3><a style="height:33px;line-height:33px;color:#333;padding: 0;background: none;font-size:14px;font-family:'思源黑体';"
                                    href="/help">布达拉宫网上购票散客须知</a></h3>
                        </li>
                        <li style="list-style: disc;color: #000;">
                            <h3><a style="height:33px;line-height:33px;color:#333;padding: 0;background: none;font-size:14px;font-family:'思源黑体';"
                                    href="/help">布达拉宫门票现场预约游客须知</a></h3>
                        </li>
                        <li style="list-style: disc;color: #000;">
                            <h3><a style="height:33px;line-height:33px;color:#333;padding: 0;background: none;font-size:14px;font-family:'思源黑体';"
                                    href="/help">温馨提示</a></h3>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="pay">
                <div style="width: 462px;">
                    <div
                        style="background-color: #7c1f0d;height: 65px;line-height: 65px;color:#fff;font-size:24px;padding-left:25px;">
                        个人订票</div>
                    <img id="bg1" src="@/assets/title-bg.png">
                    <div style="background-color: #fff;">
                        <div style="display: flex;padding:25px 20px 20px 25px;" id="booking">
                            <img src="@/assets/notice.png" style="height: 16px;width: 16px;margin-right: 10px;">
                            <div style="color: #333;font-size:14px;font-family:'MicrosoftYaHei';">
                                布达拉宫未授权任何网站及第三方平台预定布达拉宫门票，微信小程序《布达拉宫票务预订系统》为预约参观布达拉宫的唯一途径,在此提醒广大游客：切勿相信他人诱导，谨防上当受骗!</div>
                        </div>
                        <div class="card1">
                            <img src="@/assets/mp-qrcode.png" style="height: 196px;margin: 34px auto 30px;">

                            <div style="font-size:19px;color:#A92425;">
                                扫码订票 </div>
                            <div
                                style="font-size:13px;color:#333;margin-top: 5px;text-decoration: underline;text-underline-offset: 5px;">
                                <a href="/help">订票须知</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="width: 462px;">
                    <div
                        style="background-color: #b98436;height: 65px;line-height: 65px;color:#fff;font-size:24px;padding-left:25px;">
                        旅行社订票</div>
                    <img id="bg2" src="@/assets/title-bg.png">
                    <div style="background-color: #fff;">
                        <div style="display: flex;padding:25px 20px 20px 25px;height: 57.6px;" id="ttbooking">
                            <img src="@/assets/notice.png" style="height: 16px;width: 16px;margin-right: 10px;">
                            <div style="color: #333;font-size:14px;font-family:'MicrosoftYaHei';">
                                请妥善保管旅行社登录账号及密码，仔细阅读票价及优惠政策，遵守布达拉宫订票、检票管理规定。</div>
                        </div>
                        <div class="card2">
                            <img src="@/assets/pc-click.png" style="height:139px;margin:75px auto 48px">

                            <div style="font-size:19px;color:#A92425;">
                                点击订票 </div>
                            <div
                                style="font-size:13px;color:#333;margin-top: 5px;text-decoration: underline;text-underline-offset: 5px;">
                                <a href="/help">订票须知</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="height:60px;width:100%;clear:both;"></div>
        <FooterBorder></FooterBorder>
    </div>
</template>

<style scoped>
a {
    color: #666666;
    transition: all .3s ease;
}

a:hover {
    color: #c80000;
}

.pay>div {
    position: relative
}

.card1 {
    background-image: url('@/assets/ticket-bg.png');
    height: 335px;
    background-size: 100% 100%;
    text-align: center;
}

.card2 {
    background-image: url('@/assets/ticket-bg.png');
    height: 335px;
    background-size: 100% 100%;
    text-align: center;
}

#bg1,
#bg2 {
    position: absolute;
    top: 8px;
    left: 332px;
    z-index: 1;
}

.pay {
    /* margin-top: 20px; */
    display: flex;
    width: 100%;
    height: 505px;
    align-items: center;
    justify-content: space-between;
}

a {
    text-decoration: none;
}

h3 {
    color: #333333;
    font-size: 22px;
    font-weight: normal;
    margin: 0 0;
}

.line-img {
    width: 64px;
    height: 3px;
    transform: translateY(-5px);
}

.info {
    height: 343px;
    width: 960px;
    background-color: rgb(255, 255, 255);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.left {
    width: 540px;
    height: 230px;
}

.right {
    width: 350px;
    height: 230px;
}

h3 {
    color: #333333;
    font-size: 22px;
    font-weight: normal;
    margin: 0 0;
}

/* p {
    line-height: 22px;
    color: #555555;
    font-size: 18px;
} */

.top-image {
    height: 257px;
    background-image: url('@/assets/ticket.jpg');
    /* background-size: cover; */
    background-repeat: no-repeat;
    background-position: center center;
}

.container {
    width: 960px;
    margin: 0 auto;
    padding: 60px 0;
}

.bt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    /* border: 2px solid #941200; */
    border-top: 2px solid #941200;
    border-bottom: 2px solid #941200;
    margin-bottom: 30px;
}

.bt>span {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background-image: url('@/assets/more4.gif');
    background-position: center center;
    background-repeat: no-repeat;
}

.bt>a {
    text-decoration: none;
    color: #941200;
    /* background-color: #941200; */
    font-size: 18px;
    width: 96px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}</style>